<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>page</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/add.css">
</head>
<body>
    <div class="box">
        <div class="header">
            
        </div>
        <div class="infor">
            <div class="name">
                <label for="user">联系人:</label><input type="text" id="user"/>
            </div>
         
            <div class="sex">
                <span class="active">男士</span>
                <span>女士</span>
            </div>
            <div class="telepone">
                <label for="tel">电话:</label><input type="text" id="tel"/>
            </div>
          <div class="city">
            <label for="address">地址:</label><input type="text" id="address"/>
          </div>
            <div class="id">
                <label for="card">门牌号</label><input type="text" id="card">
            </div>
            <input type="button" value="确定" class="save">
        </div>
    </div>
</body>
</html>
<script src="js/get.js"></script>
<script src="js/request.js"></script>
<script>
    let url=location.search;

    let oUrl=(url.slice(url.lastIndexOf('=')+1))
   
    let iUrl=(url.slice(url.indexOf('?'),5))
    
    let cUrl=(url.slice(url.indexOf('?')+1,5))
    console.log(cUrl)
    if(oUrl==='add'){
        //创建头部信息
        function getdom(){
            var temp=`<span class="back">back</span>
            <span>添加页面</span>
            <span class="add"></span>`
            return temp;
        }
        $('.header').innerHTML=getdom()
        $('.back').onclick=function(){
            location.href='./address.html'
        }
        //先选择性别;
        el('.sex span').forEach(item=>{
            
        item.onclick=function(){
            el('.sex span').forEach(item=>{
                item.classList.remove('active')
            })
            item.classList.add('active')
            }
        })

        $('.save').onclick=function(){
            //收集 数据；
            let obj={};
            obj.name=$('#user').value;
            obj.address=$('#address').value
            obj.tel=$('#tel').value;
            obj.card=$('#card').value;
            el('.sex span').forEach(item=>{
                if(item.className==='active'){
                    obj.sex=item.innerHTML;
                }
            })
            obj=JSON.stringify(obj)
            //此时我们得到obj
            request('/adduser','POST',`us=${obj}`,function(dat){
                console.log(dat)
                if(dat==='1'){
                    location.href="./address.html" 
                }
             //返回首页。重新渲染
            })
                
            //console.log(obj)
            //上传数据； 
        }
    }
    //当页面跳转过来 字段是edit的话 就修改数据
    if(oUrl==="edit"){
        function getdom(){
            var temp=`<span class="back">back</span>
            <span>编辑地址</span>
            <span class="add">删除</span>`
            return temp;
        }
        $('.header').innerHTML=getdom()
        //点击返回
        $('.back').onclick=function(){
            location.href='./address.html'
        }
         //先选择性别;
         el('.sex span').forEach(item=>{
            
            item.onclick=function(){
                el('.sex span').forEach(item=>{
                    item.classList.remove('active')
                })
                item.classList.add('active')
                }
            })

        //通过ajxs获取数据
        request(`/edit${iUrl}`,'GET',null,function(dat){
            var data=JSON.parse(dat)
            console.log(data)
            $('#user').value=data.name
            $('#address').value=data.address
            $('#tel').value=data.tel
            $('#card').value=data.card
            console.log(data.sex) 
            el('.sex span').forEach(item=>{
                if(item.innerHTML===data.sex){
                    el('.sex span').forEach(ite=>{
                        ite.classList.remove('active')
                     })
                    item.classList.add('active')
                }
            })   
        })

        //点击确定上传数据
        $('.save').onclick=function(){
            let obj={};
            obj.name=$('#user').value;
            obj.address=$('#address').value
            obj.tel=$('#tel').value;
            obj.card=$('#card').value;
            el('.sex span').forEach(item=>{
                if(item.className==='active'){
                    obj.sex=item.innerHTML;
                }
            })
            obj=JSON.stringify(obj)
            //上传数据 更改数据
            request('/newuser','POST',`${cUrl}&&us=${obj}`,function(dat){
                console.log(dat)
                if(dat==='1'){
                    location.href="./address.html" 
                }
            })
        }
    }


    
</script>